<template>
  <div>
    <el-dialog title="批量添加搜索" 
    v-model="props.Batchdialog" 
    style="width:600px;"
    @close="Batchdialog"
    >
       <h4>上传文件</h4>
       <el-col :span="24"><span>第一次上传</span>
      
         <el-button
        class="searchbtn green" 
        type="primary" size="large" 
        style="width: 100px;margin-left:80px"
        @click="Download"
        >
        点击下载模板
        </el-button >
       </el-col>

       <!-- 上传文件 需判断 -->
      <el-row :gutter="24">
       <el-col :span="24" style="margin-top:30px"><span >上传文件</span> <span>  
        
       <el-button
        class="searchbtn green" 
        type="primary" size="large" 
        style="width: 100px;margin-left:80px">上传
        </el-button >
        </span>
        </el-col>
        <el-col :span="24"  style="margin-top:30px">
        <span style="margin-left:130px;color:red;">请上传xlsx格式文件</span>
        </el-col>

          </el-row>
          <el-row :gutter="24">
          <el-col :span="6">
            <span>已上传</span>
          </el-col>
          <cl-col :span="18 " style="background-color:#f8f8f8;width:400px;height:30px;line-height:30px">
             <span>文件123 </span><span style="margin-left:320px">x</span>
          </cl-col>
          
          </el-row>

       <div style="display: flex; justify-content: end">
        <el-button 
        @click="btnCancel" 
        class="searchbtn" 
        style="width:100px;height:40px"
          >取消</el-button
        >
        <el-button 
        class="searchbtn green" 
        type="primary" size="large" 
        style="width: 100px"
        @click="BatchadditionBTN"
          >确定</el-button
        >
      </div>
</el-dialog></div>
<el-dialog title="导入结果" v-model="resultdialog" style="width:600px;height:200px">
<el-col :span="24">成功<span>22条</span>  导入失败<span>3</span>条</el-col>
</el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {getExportTemplate} from '@/api/home'
import FileSaver from 'file-saver'
const resultdialog =ref(false)
const props = defineProps({
  Batchdialog: {
    type: Boolean,
    default: false
  }
})

//子传父控制弹窗
const emits = defineEmits(["dialogFormVisiblea"])
const btnCancel = () => {
 emits('dialogFormVisiblea',false)
 // props.value.showDialog=false
 console.log(12);
}

const BatchadditionBTN =()=>{
resultdialog.value=true
}

const Download=async()=>{
    const data = await getExportTemplate()
    FileSaver.saveAs(data, '员工导入模版.xlsx')
}
</script>

<style scoped >
::v-deep .el-dialog__header{
  padding: 0px;
  margin: 0px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e9e6e6;
  color: #fff !important;;
}
::v-deep .el-dialog{
  padding: 0px;

}



.searchbtn {
  border-radius: 20px;
}
.green {
  background: #05cc95;
}
</style>